<template>
    <div class="h100 rel">
        <the-cesium-map
            class="map"
            :recive-id="distributeId"
            :key="distributeId"
            :current-pond="currentPond"
        />
        <div class="client-blur"></div>
        <the-left class="left" :recive-id="distributeId" />
        <the-right class="right" :recive-id="distributeId" :platform-code="platformCode">
            <WSelect class="select" :options="options" v-model="distributeId" />
        </the-right>
        <TheLogo />
    </div>
</template>

<script>
import TheCesiumMap from "./component/TheCesiumMap";
import TheLeft from "./component/TheLeft";
import TheRight from "./component/TheRight";
import TheLogo from "./component/TheLogo";
import WSelect from "../../component/WSelect";
import { FetchTailingPondiList, FetchUnitPlatfrom } from "@/api";

export default {
    name: "Client",
    components: {
        TheCesiumMap,
        TheLeft,
        TheRight,
        TheLogo,
        WSelect,
    },
    props: {
        platformCode: {
            type: String,
            default: "makeng",
        }, //from route query
    },
    data() {
        return {
            temp: null,
            pondList: [],
        };
    },
    computed: {
        distributeId: {
            get() {
                return this.temp || (this.options[0] && this.options[0].value);
            },
            set(val) {
                this.temp = val;
            },
        },
        currentPond() {
            return this.pondList.find((item) => (item.id = this.distributeId));
        },
        options() {
            return this.pondList.map((ele) => {
                return {
                    label: ele.tailingName,
                    value: ele.id,
                };
            });
        },
    },
    created() {
        this.getSelectOptions();
    },
    methods: {
        async getSelectOptions() {
            const { unitId } =
                (await FetchUnitPlatfrom({
                    platformCode: this.platformCode,
                })) || {};
            if (!unitId) {
                return;
            }
            this.pondList = await FetchTailingPondiList({ id: unitId });
        },
    },
};
</script>

<style lang="scss">
@import "~@/public/style/index.scss";
@import "~@/asset/style/common.scss";
</style>
<style lang="scss" scoped>
.h100 {
    height: 100%;
    // overflow: hidden;
    color: #fff;
    .map {
        height: 100%;
    }
    .left {
        position: absolute;
        left: 35px;
        top: 7.5vh;
        width: 315px;
    }
    .right {
        position: absolute;
        top: 7.5vh;
        right: 20px;
        width: 358px;
        // border: 1px solid red;
    }

    .select {
        width: 358px;
        height: 44px;
    }
}
.client-blur {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #000000 1%, transparent 30%),
        linear-gradient(to bottom, #000000 1%, transparent 5%),
        linear-gradient(to right, #000000 1%, transparent 20%),
        linear-gradient(to top, #000000 1%, transparent 35%);
}
</style>
